<template>
    <div class="contents">
        <div class="growhead" color="#000">
			<van-nav-bar
			title="话题详情"
			left-text="返回"
			left-arrow
			@click-left="onClickLeft"
			/>
		</div>
        <section class="topicdetail">
            <img class="topicimg" src="./../assets/img/userimg1.jpg" alt="">
            <h6>你们都比较喜欢哪种风格的家具？</h6>
            <p>床头、客厅、玄关......你们家布置的装饰画美得不像话，堂主垂涎很久了。一起来讨论讨论选购经验吧</p>
        </section>
        <aside class="releasepl">
            <textarea class="inputtopic" cols="30" rows="10" placeholder="请输入评论">
            </textarea>
            <router-link class="release" to="/successfully" tag="span">发布</router-link>
        </aside>
        					<span class="plnumber">评论(18)</span>
					<ul class="Grassreview">
						<li>
							<aside class="everyreview">
								<img class="reviewimg" src="./../assets/img/userimg1.jpg">
								<div class="reviewright">
									<h6>小红花</h6>
									<p>真好看</p>
									<span>32分钟前</span>
								</div>
								<span class='iconfont icon-dianzan'></span>
							</aside>
						</li>
						<li>
							<aside class="everyreview">
								<img class="reviewimg" src="./../assets/img/userimg1.jpg">
								<div class="reviewright">
									<h6>小红花</h6>
									<p>真好看</p>
									<span>32分钟前</span>
								</div>
								<span class='iconfont icon-dianzan'></span>
							</aside>
						</li>
						<li>
							<aside class="everyreview">
								<img class="reviewimg" src="./../assets/img/userimg1.jpg">
								<div class="reviewright">
									<h6>小红花</h6>
									<p>真好看</p>
									<span>32分钟前</span>
								</div>
								<span class='iconfont icon-dianzan'></span>
							</aside>
						</li>
                        <li>
							<aside class="everyreview">
								<img class="reviewimg" src="./../assets/img/userimg1.jpg">
								<div class="reviewright">
									<h6>小红花</h6>
									<p>真好看</p>
									<span>32分钟前</span>
								</div>
								<span class='iconfont icon-dianzan'></span>
							</aside>
						</li>
					</ul>
                    <aside class="loadmore">
						查看全部评论
						<span class="iconfont icon-gengduo"></span>
					</aside>
    </div>
</template>


<script>
import Vue from 'vue'
import Header from './Header'
import { NavBar,Tab, Tabs  } from 'vant';

Vue.use(Tab).use(Tabs);
Vue.use(NavBar);
export default {
	data () {
        return {
            
        }
	},
	methods: {
	  onClickLeft () {
		this.$router.go(-1);
	  }
	},
	components: {
		Header
	}
}

</script>

<style lang="scss" scoped="scoped">
    .topicdetail{
        color:#101010;
        margin:0.1rem;
        border-bottom: 2px solid #ccc;
        .topicimg{
            width:100%;
            height:1.34rem;
        }
        h6{
            font-size: 0.14rem;
            margin:0.1rem 0;
            font-weight: normal;
        }
        p{
            font-size: 0.14rem;
            line-height:0.2rem;
            margin-bottom: 0.2rem;
        }
    }
    .releasepl{
        position: relative;
        width: 100%;
        .inputtopic{
            width:100%;
            border:1px solid #ccc;
            text-indent: 0.12rem;
        }
        .release{
            width:0.8rem;
            height:0.3rem;
            border:1px solid #cccccc;
            border-radius: 0.04rem;
            display: block;
            position: absolute;
            right:0.05rem;
            bottom:0.16rem;
            text-align: center;
            line-height: 0.3rem;
        }
    }
    		.plnumber{
			margin:0;
            margin-left:0.1rem;
		}
		.everyreview{
            margin:0 0.1rem;
            margin-bottom: 0.1rem;
			color:#6C6C6C;
			height:0.52rem;
			display: flex;
			margin-top:0.12rem;
			.reviewimg{
				height:0.52rem;
				width:0.52rem;
				border-radius: 50%;
			}
			.reviewright{
				margin-left:0.1rem;
				h6{
					font-weight: normal;
					font-size: 0.14rem;
					line-height: 0.18rem;
				}
				p{
					font-size: 0.12rem;
					line-height: 0.18rem;
				}
				span{
					color:#6C6C6C;
					margin:0;
					padding:0;
					line-height: 0.18rem;
				}
			}
			span{
				flex:1;
				text-align: right;
				line-height: 0.9rem;
				color:#6c6c6c;
			}
		}
        .loadmore{
			width:100%;
			text-align: center;
		}

</style>